<template>
  <div>
    <el-container>
      <el-header class="header">
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item>
            <el-button type="primary" circle="" icon="el-icon-plus" @click="add" ></el-button>
          </el-form-item>
          <el-form-item label="帐号：">
            <el-input placeholder="按帐号查询" v-model="keyword.username"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" circle="" icon="el-icon-search" @click="loadAdmins(true)"></el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table ref="multipleTable" :data="adminData" tooltip-effect="dark" style="width: 100%">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="id" prop="id"></el-table-column>
          <el-table-column label="账号" prop="username"></el-table-column>
          <el-table-column label="创建日期" prop="createDate" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作日期" prop="updateDate" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="keyword.currentPage"
          :page-sizes="[1, 2, 3, 4,5]"
          :page-size="keyword.pageSize"
          class="page"
          big
          layout="total,sizes,prev, pager, next"
          :total="total"
        ></el-pagination>
      </el-main>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
        <el-form :model="admin" ref="adminForm" label-width="100px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="admin.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="admin.password" type="password"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import { getAdmins, remove, insert, update } from "@/api/admin.js";
export default {
  name: "",
  data() {
    return {
      admin: {},
      title: "",
      keyword: { currentPage: 1, pageSize: 4 },
      total: 0,
      dialogVisible: false,
      adminData: [],
    };
  },
  created() {
    this.loadAdmins();
  },
  methods: {
    loadAdmins(val) {
      if (val) {
        this.keyword.currentPage = 1;
      }
      getAdmins(this.keyword).then((res) => {
        if (res.data.code === "0000") {
          this.adminData = res.data.data.records;
          this.total = Number.parseInt(res.data.data.total);
        }
      });
    },
    handleSizeChange(val) {
      this.keyword.pageSize = val;
      this.loadAdmins(false);
    },
    handleCurrentChange(val) {
      this.keyword.currentPage = val;
      this.loadAdmins(false);
      console.log(`当前页: ${val}`);
    },
    add() {
      this.title = "添加管理员";
      this.dialogVisible = true;
      this.admin={}
    },
    handleEdit(index, row) {
      this.title = "编辑";
      this.dialogVisible = true;
      this.admin = row;
      console.log(index, row);
    },
    handleDelete(index, row) {
      this.$confirm("确认要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row.id);
          remove(row.id).then((res) => {
            if (res.data.code == "0000") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.loadAdmins();
            }
            console.log(res.data.code);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    save() {
      if (this.title == "添加管理员") {
        insert(this.admin).then((res) => {
          if (res.data.code === "0000") {
            this.$message({
              type: "info",
              message: res.data.msg,
            });
            // this.$emit("show", this.dialogVisible);
            this.dialogVisible = false;
            this.loadAdmins();
          }
        });
      } else if (this.title == "编辑") {
        this.admin.updateDate=null
        update(this.admin).then((res) => {
          if (res.data.code === "0000") {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
            // this.$emit("show", this.dialogVisible);
            this.dialogVisible = false;
            this.loadAdmins();
          }
        });
      }
    },
  },
};
</script>

<style>
.header {
  text-align: left;
}
</style>